import React from 'react'
import {Col, Row,Select,Checkbox} from "antd";

import {WeaLocaleProvider,WeaInput,WeaBrowser, WeaFormItem, WeaInputNumber, WeaSearchGroup, WeaSelect} from "ecCom";
import EField_New from "../../../portal/elements/components/common/setting_new/content/base/EField_New";
const getLabel = WeaLocaleProvider.getLabel;

export default class AddExtends extends React.Component{

    state = {
        eFieldNewDataSource:'',
        eFieldNewUsedKeys:'',
        eFieldNewVisible:false
    }

    componentWillMount(){
        const {setSetting,setId} = this.props
        if(setId == -1){
            setSetting({
                showType:'1',
                doc:'',
                docReplaceData:'',
                imgWidth:'120',
                imgWidthType:'1',
                imgHeight:'108',
                imgHeightType:'1',
                autoHeight:false
            })
        }
    }



    render(){
        const {data,setting,setSetting} = this.props
        const {eFieldNewDataSource} = data
        const {showType,imgWidth,imgWidthType,imgHeight,imgHeightType,autoHeight,docReplaceData,eFieldNewUsedKeys=[]} = setting


        let EFieldNew = <div></div>;
        const {eFieldNewVisible} = this.state
        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    setSetting({
                        /* eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),*/
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),

                    });
                    this.setState(function(state,props){
                        return {
                            eFieldNewVisible:false
                        }
                    })
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNew = <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@3o531j`} {...eFieldNewProps}/>
        }
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }

        const optionsShowType =
            [{
                key: "1",
                showname: getLabel(19525, '列表式')
            },{
                key: "2",
                showname: getLabel(387382,"列表式2")
            },{
                key: "3",
                showname: getLabel(82759, '左图式')
            }]


        return (
            <div>
                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@22a35u`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@eey9aw`} span={6} >
                            <div>{getLabel(21653, '显示方式')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@m8odxc`} span={18}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@howxmw`}
                                options={optionsShowType}
                                value={showType}
                                onChange={(value)=>{
                                    setSetting({
                                        showType: value,
                                    });
                                }}
                            />
                        </Col>
                    </Row>
                </div>
                {
                    showType == 2 || showType== 3 ?(
                        <div style={{'margin-top':'10px'}}>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@lhr22j`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5n6vch`} span={6} >
                                    <div>{getLabel(386551, '缩略图设置')} :</div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7rwjtj`} span={18}>
                                    <ul style={{lineHeight: '29px'}}>
                                        <li style={{display: 'inline-block'}}>
                                        <span>
                                                <span>{getLabel(386529, '宽度：')}</span>
                                                <div style={{display:'inline-block','width':'70px','vertical-align':'middle'}}>
                                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@lx1wux`}
                                                        value={imgWidth}
                                                        style={{width: '60px', marginRight: '8px', marginBottom: '4px'}}
                                                        onChange={value => setSetting({'imgWidth': value})}
                                                    />
                                                </div>
                                                <div style={{display:'inline-block','width':'50px'}}>
                                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@hcbahp`}
                                                        className="portal-news-picture"
                                                        value={imgWidthType}
                                                        onChange={value => setSetting( {'imgWidthType': value })}
                                                        options={[
                                                            {
                                                                key: "1",
                                                                selected: true,
                                                                showname: "px"
                                                            },
                                                            {
                                                                key: "2",
                                                                selected: false,
                                                                showname: "%"
                                                            }
                                                        ]}
                                                        style={{width: '50px', marginRight: '8px', marginBottom: '4px'}}
                                                    />
                                                </div>

                                            {
                                                autoHeight ==false ?
                                                    (
                                                        <span style={{marginLeft: '20px','vertical-align':'middle'}}>
                                                        <span>{getLabel(386530, '高度：')}</span>
                                                        <div style={{display:'inline-block','width':'70px','vertical-align':'middle'}}>
                                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@c6mw26`}
                                                                value={imgHeight}
                                                                style={{width: '60px', marginRight: '8px', marginBottom: '4px'}}
                                                                onChange={value => setSetting( {'imgHeight': value})}
                                                            />
                                                        </div>
                                                        <div style={{display:'inline-block','width':'50px'}}>
                                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2ueunc`}
                                                                className="portal-news-picture"
                                                                value={imgHeightType }
                                                                onChange={value => setSetting({'imgHeightType': value})}
                                                                options={[
                                                                    {
                                                                        key: "1",
                                                                        selected: true,
                                                                        showname: "px"
                                                                    },
                                                                    {
                                                                        key: "2",
                                                                        selected: false,
                                                                        showname: "%"
                                                                    }
                                                                ]}
                                                                style={{width: '50px', marginRight: '8px', marginBottom: '4px'}}
                                                            />
                                                        </div>
                                                    </span>
                                                    )
                                                    :""

                                            }
                                            <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@n2wb3v`}
                                                style={{marginLeft: '0px'}}
                                                checked={autoHeight}
                                                onChange={e => setSetting({'autoHeight':e.target.checked})}
                                            >{getLabel(22494, '自适应高度')}</Checkbox>
                            </span>
                                        </li>
                                    </ul>
                                </Col>
                            </Row>
                        </div>
                    ):""
                }

                {
                    showType == '6' || showType == '7' ? ''
                        : <div style={{'margin-top':'10px'}}>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@n1d24g`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@on5awo`} span={6} >
                                    <div>{getLabel(19495, '显示字段')} :</div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ggstlz`} span={18}>
                                    {EFieldNew}
                                    <div style={{height: '100%', lineHeight: '23px'}}>
                                        <i className="icon-coms-Flow-setting portal-esetting-btn"
                                           style={{position: "relative", zIndex: "12",top:5}}
                                           onClick={() => this.setState({eFieldNewVisible: true})}/>
                                        <div
                                            title={eFieldNewUsedNames.join('，')} style={{marginTop:-18,"-webkit-line-clamp": 2,
                                            "-webkit-box-orient": "vertical",    "cursor": "pointer"}}>&nbsp;&nbsp;&nbsp;&nbsp;{eFieldNewUsedNames.join('，')}</div>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                }
                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@u5qeux`} >
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fi4fm6`} span={6} >
                            <div>{getLabel(16398, '文档目录')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cj2dvu`} span={18}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@7o78kz`}
                                title={getLabel(386382,"请选择")}
                                type="doccategory"
                                replaceDatas={ docReplaceData|| []}
                                isSingle={false}
                                onChange={(ids, names, datas) => {
                                    setSetting({doc: ids, docReplaceData: datas})
                                }}
                                layout={document.body}
                            />
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}